<template>
  <!--信用公示-->
  <div class="container">
    <div class="main">
      <div class="content">
        <div
          style="text-align: center; padding-top: 20px; padding-bottom: 20px"
        >
          <img src="../../../static/img/common/creditPublicity.png" />
        </div>
        <div class="search">
          <template v-if="!isHsUser()">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              prefix-icon="el-icon-search"
            >
              <el-button slot="append" @click="search">搜索</el-button>
            </el-input>
          </template>
          <template v-else>
            <el-input
              v-model="filterField.keyword"
              placeholder="请输入企业名称或统一社会信用代码"
              prefix-icon="el-icon-search"
            >
              <el-button slot="append" @click="search">搜索</el-button>
            </el-input>
          </template>
        </div>
        <div>
          <div class="box">
            <ul class="tab-tilte">
              <li @click="changeTab(0)" :class="{ active: cur == 0 }">
                {{ !isHsUser() ? 'A级榜•优质项目' : '优质企业' }}
              </li>
              <li @click="changeTab(1)" :class="{ active: cur == 1 }">
                {{ !isHsUser() ? 'D级榜•欠薪隐患项目' : '欠薪隐患企业' }}
              </li>
            </ul>
            <div class="tab-content">
              <div
                v-for="(item, index) in tableList"
                style="border-bottom: 1px #deeef9 solid"
                :key="index"
              >
                <template v-if="!isHsUser()">
                  <div
                    style="
                      height: 64px;
                      line-height: 64px;
                      font-size: 16px;
                      color: #375f88;
                      position: relative;
                      padding-left: 36px;
                    "
                  >
                    [{{ item.projectScoreTime }}]&nbsp;&nbsp;{{
                      item.projectName
                    }}
                    <div
                      style="
                        position: absolute;
                        right: 5px;
                        top: 0;
                        width: 60px;
                        height: 60px;
                        text-align: center;
                        cursor: pointer;
                      "
                      @click="changeContent(index)"
                      ref="arrow"
                    >
                      <i class="el-icon-arrow-down" />
                    </div>
                  </div>
                  <div
                    ref="child"
                    style="
                      height: 100px;
                      background-color: #f7fafe;
                      position: relative;
                      display: none;
                    "
                  >
                    <div
                      style="
                        height: 40px;
                        line-height: 40px;
                        padding-top: 10px;
                        color: #8298ae;
                        padding-left: 36px;
                      "
                    >
                      建设方:{{ item.pcName }}
                    </div>
                    <div
                      style="
                        height: 40px;
                        line-height: 40px;
                        color: #8298ae;
                        padding-left: 36px;
                      "
                    >
                      施工方:{{ item.pbName }}
                    </div>
                    <div
                      style="
                        width: 60px;
                        height: 60px;
                        text-align: center;
                        position: absolute;
                        right: 50px;
                        top: 20px;
                      "
                    >
                      <div style="font-size: 32px; color: #5fab2c">
                        {{ item.gradeLevel }}
                      </div>
                      <div style="font-size: 12px; color: #356285">
                        项目评级
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div
                    style="
                      height: 64px;
                      line-height: 64px;
                      font-size: 16px;
                      color: #375f88;
                      position: relative;
                      padding-left: 36px;
                    "
                  >
                    [{{ item.createTime | dateHandle }}]&nbsp;&nbsp;{{
                      item.companyName
                    }}（{{ item.uscc }}）
                    <div
                      style="
                        width: 60px;
                        height: 60px;
                        text-align: center;
                        position: absolute;
                        right: 50px;
                        top: 0;
                      "
                    >
                      <div
                        style="
                          font-size: 32px;
                          color: #5fab2c;
                          line-height: 50px;
                        "
                      >
                        {{ item.gradeLevel }}
                      </div>
                      <div
                        style="font-size: 12px; color: #356285; line-height: 0"
                      >
                        企业评级
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <div
                v-show="isShow"
                style="
                  height: 64px;
                  line-height: 64px;
                  font-size: 16px;
                  color: #375f88;
                  position: relative;
                  padding-left: 36px;
                  text-align: center;
                "
              >
                榜单中不包含此{{ !isHsUser() ? '项目' : '企业' }}
              </div>
            </div>
            <Pagination
              ref="pagination"
              @getList="getTableList"
              :filterField="filterField"
              :requestUrl="requestUrl"
              style="margin-top: 30px"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'creditPublicity',

  data() {
    return {
      isShowType: false,
      activeIndex: '2',
      tableList: [],
      requestUrl: 'api-ps/projectscore/expand/listbypublic',
      // requestUrl: "api-ps/creditProjectScore/expand/listbypublic",
      date: [],
      //搜索条件
      filterField: {
        projectName: '',
        keyword: '',
        // gradeLevel: "A",
        // highScore: null,
        // lowScore: null
      },
      isSearch: false,
      isShow: false, //列表加载
      cur: 0, //默认选中第一个tab
    }
  },
  created() {
    if (this.isHsUser()) {
      this.requestUrl = 'api-ps/creditProjectScore/expand/listbypublic'
      this.filterField.highScore = 80
      this.filterField.lowScore = null
    } else {
      this.filterField.gradeLevel = 'A'
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    changeTab(index) {
      this.cur = index
      if (index === 0) {
        if (this.isHsUser()) {
          this.filterField.highScore = 80
          this.filterField.lowScore = null
        } else {
          this.filterField.gradeLevel = 'A'
        }
      } else {
        if (this.isHsUser()) {
          this.filterField.lowScore = 80
          this.filterField.highScore = null
        } else {
          this.filterField.gradeLevel = 'D'
        }
      }
      this.$refs.pagination.getTableListData()
    },
    search() {
      this.$refs.pagination.getTableListData()
    },
    getTableList(data) {
      this.tableList = data
      this.isShow = this.tableList.length <= 0
    },
    changeContent: function (index) {
      if (this.$refs.child[index].style.display === 'none') {
        this.$refs.child[index].style.display = 'block'
        this.$refs.arrow[index].style.transform = 'rotateX(180deg)'
      } else {
        this.$refs.child[index].style.display = 'none'
        this.$refs.arrow[index].style.transform = 'rotateX(0deg)'
      }
    },
    goBackList() {
      this.$router.push('/login/loginFirst')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/login/loginFirst',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.main {
  padding-bottom: 20px;
}

.content {
  margin: 0 auto;
  // width: 900px;
}

.search {
  input {
    height: 38px;
    border-radius: 0;
    border: 1px solid #356285;
  }
  /deep/ .el-input__inner {
    height: 38px;
    line-height: 38px;
    border: 1px solid #356285;
  }
  /deep/ .el-input-group__append,
  .el-input-group__prepend {
    border: none;
  }
  /deep/ i.el-input__icon.el-icon-search {
    color: #356185;
  }
  button {
    background-color: #356285;
    width: 112px;
    height: 38px;
    color: #ffffff;
    border-radius: 0;
  }
}

/* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */
.box {
  margin: 20px auto;
  margin-bottom: 30px;
}

ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab-tilte li {
  float: left;
  width: 50%;
  /*padding: 10px 0;*/
  text-align: center;
  cursor: pointer;
  background: #deeef9;
  font-size: 20px;
  line-height: 38px;
  height: 38px;
  color: #b0c1ce;
}

/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
  background: #c9dfee;
  color: #356185;
  font-size: 20px;
}

.tab-content {
  clear: both;
}
</style>
